<template>
  <div>
    <h1>name-{{ name.Feng }}</h1>
    <h1>toRef-{{ refFeng }}</h1>
    <h1>toRefs-{{ refName.Feng }} love {{ refName.Ya }}</h1>
    <h1>toRefs-{{ Feng }} {{ Ya }}</h1>
    <button @click="changeFeng">换</button>
    <button @click="changeName">变</button>
  </div>
</template>

<script setup>
import { ref, toRef, toRefs } from 'vue'
const name = ref({ Feng: "二桥", Ya: "拾涯"})

// 解构赋值会丢失对象的响应式
// const { Feng, Ya } = name
// toRef:让响应式对象的单个属性具有ref响应式效果
// toRefs:让响应式对象的所有属性具有ref响应式效果
const { Feng, Ya } = toRefs(name.value)
const refFeng = toRef(name.value, 'Feng')
const changeFeng = () => {
  refFeng.value = '阿峰'
}
const refName = toRefs(name.value, 'Feng', 'Ya')
const changeName = () => {
  refName.Feng.value = '阿峰'
  refName.Ya.value = '阿雅'
}

</script>

<style lang="scss" scoped>

</style>